<template>
  <p>{{ error }}</p>
  <Suspense>
    <template #default>
      <AsyncNumber />
    </template>
    <template #fallback>
      Loading...
    </template>
  </Suspense>
  <Suspense>
    <template #default>
      <PromiseNumber />
    </template>
    <template #fallback>
      Loading...
    </template>
  </Suspense>
</template>

<script lang="ts">
  import { defineComponent, ref, onErrorCaptured, Ref } from 'vue';

  import AsyncNumber from '@/components/AsyncNumber.vue';
  import PromiseNumber from '@/components/PromiseNumber.vue';

  export default defineComponent({
    name: 'Async',
    components: { PromiseNumber, AsyncNumber },
    setup: () => {
      const error: Ref<unknown> = ref(null);
      onErrorCaptured(e => {
        error.value = e;
        return true;
      });
      return { error };
    }
  });
</script>

<style scoped></style>
